<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const props = defineProps({
  list: Array,
  isListShow: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['searchInput', 'clickItem', 'update:isListShow'])

const query = uni.createSelectorQuery().in(getCurrentInstance())
const inputRef = ref(null)
const value = ref('')
const height = ref(0)


onMounted(() => {
  query.select('.contact-list').boundingClientRect(data => {
    height.value = (wx.getSystemInfoSync().windowHeight - data.top - 170) * 2
  }).exec()

})

function clickItem(item) {
  emit('update:isListShow', true)
  emit('clickItem', item)
}

// 输入框
function searchInput2() {
  emit('update:isListShow', true)
  emit('searchInput', value.value)
}



const touchmove = () => {
  emit('update:isListShow', true)
}
</script>

<template>
  <div class="contact-wrap">
    <input ref="inputRef" id="inputRef" class="inputSty" v-model="value" type="text" @tap.stop="searchInput2"
      @input="searchInput2" />

    <div :style="{ '--height': height + 'rpx' }" :class="isListShow ? 'show' : 'hide'" class="contact-list">
      <div class="item" v-for="item of list" @touchmove="touchmove" @tap.stop="clickItem(item)">
        <i class="iconfont ai-icon-question" />
        <div class="content">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.contact-wrap {
  width: 100%;

  .inputSty {
    box-sizing: border-box;
    display: block;
    width: 690rpx;
    height: 86rpx;
    background: var(--a-main-box-bg-color);
    border-radius: 20rpx;
    margin: 15rpx 0;
    padding-left: 15rpx;
    color: var(--a-one-text-color);
  }

  .contact-list {
    width: 690rpx;
    background-color: var(--a-main-box-bg-color);
    border-radius: 20rpx;
    max-height: 0;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .item {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 15rpx;
      height: 88rpx;
      line-height: 88rpx;
      color: var(--a-two-text-color);


      .iconfont {
        margin-right: 15rpx;
      }

      .content {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .show {
    animation: show 1s;
    animation-fill-mode: forwards;
  }

  .hide {
    animation: hide 1s;
    animation-fill-mode: forwards;
  }

  @keyframes show {
    from {
      max-height: 0;
    }

    to {
      max-height: var(--height);
    }
  }

  @keyframes hide {
    from {
      max-height: var(--height);
    }

    to {
      max-height: 0;
    }
  }
}
</style>